<template>
  <div class=" container" >
        <div class="my_table">
            <el-table :data="List1.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
            style="{width: '100%',background-color:'#10254a'}" :header-cell-style= "{color: '#edef5c',height: '40px',background:'#10254a'}" 
            row-class-name="rows"
            :cell-style="columncolorStyle">
                <el-table-column
                    prop="type"
                    label="报警类型"
                    width="180"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="报警时间"
                    width="180"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="img"
                    label="图片URL"
                    width="180"
                    align="center"
                    :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-popover
                            placement="right"
                            title=""
                            trigger="click">
                            <el-image slot="reference" 
                            :src="scope.row.imgPath"
                            :alt="scope.row.name"
                            style="max-height: 200px;max-width: 200px">
                            </el-image>
                            <el-image :src="scope.row.imgPath"></el-image>
                    </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="number"
                    label="摄像头编号"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="摄像头名称"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="confidence"
                    label="置信度"
                    align="center">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="deleteRow(scope.$index, List1)"
                        type="text"
                        size="small">
                        <div class="change_icon"><i class="el-icon-circle-close"></i></div>
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="row">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="List1.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name:'Firectrl',
    data() {
        return {
            List1:[],
            currentPage: 1, //  el-pagination 初始页
            pagesize: 10, //  el-pagination 每页的数据
        }
    },
    created() { 
        this.getUserList1()    
    },
    methods:{
        async deleteRow(index, rows) {
            await this.$http.delete("http://localhost:9090/fireAlarm/" + index).then(res => {
                console.log(res)
                if(res.data.code===200){
                    // 不发请求更新页面
                rows.splice(index,1)
                this.$message.success("删除成功")
                }
            }).catch(error =>{
                this.$message.error('错误')
            })  
      },
        getUserList1() {
            //使用axios发送ajax请求
            //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
            this.$http.get("http://localhost:9090/fireAlarm/getAll")
                .then(response =>{//请求成功执行then方法
                    this.List1 = response.data.data
                    console.log(this.List1)  
                }) 
                .catch(error =>{
                }) //请求失败执行catch方法
        },
        handleSizeChange: function(size) {
            this.pagesize = size
            console.log(this.pagesize) // 每页下拉显示数据
        },
        handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage
        console.log(this.currentPage) // 点击第几页
        },
        columncolorStyle({row,column,rowIndex,columnIndex}){
            if(row){
                return 'background:#10254a'
            }
            //  if(columnIndex==0){        
            //     return 'color:#ad6066'
            // }
        },
        // previewPic(url){
        //     this.previewpic=url;
        //     this.dialogVisible=true;
        // },
        timer1() {
            return setTimeout(()=>{
                this.getUserList1()  
            },5000)
        },
        },
    watch: {
        List1() {
            this.timer1()  
        },
    },
    destroyed() {
        clearTimeout(this.timer)
    }
}
</script>

<style scoped>
 @media screen and (min-width:1280px) {
    .container{
        position: relative;
        width:1280px;
    }
}
body{
    background-color:#132c57;
}
/* .container{
    background-color: #10254a;
} */

.my_table >>> .el-table__row>td{
  /* 去除表格线 */
  border: none;
}
.row{
    height:120px;
    color:#fff;
}
/* .el-pagination{
    position: absolute;
    right:0;
} */
.change_icon{
    font-size: 20px;
}
</style>